<template>
  <div style="with:100%;height:100%; position: relative;">
    <div class="subjectInfo">
      <div class="officialTop">
        <div class="topBox">
          <div class="contentTop">
            <p>
              {{ transformTimestamp(subjectInfo.addDate) }}
            </p>
            <div class="userInfo">
              <div class="userPicture">
                <img :src="baseUrl+subjectInfo.userImg" alt="" width="36px"
                     height="36px"
                >
              </div>
              <p>
                {{ subjectInfo.userName }}<br>
                <el-tag :type="userExperType" size="mini">
                  Lv.{{ subjectInfo.userexper }} {{ userExperDes }}
                </el-tag>
              </p>
            </div>
          </div>
          <div class="contentMiddle">
            <p>{{ subjectInfo.qtitle }}</p>
            <span>{{ showEllipsis(subjectInfo.qdesc,60) }}</span>
          </div>
          <div class="contentBottom">
            <div class="progress">
              <div class="progressText">
                <span style="color:#409EFF">{{ subjectInfo.optionOne }} {{ subjectInfo.optionsNum1 }}</span>
                <span style="color:#F56C6C">{{ subjectInfo.optionTwo }} {{ subjectInfo.optionsNum2 }}</span>
              </div>
              <el-progress
                :percentage="subjectInfo.percent"
                :format="format"
                :text-inside="true"
                :stroke-width="10"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="infoBottom">
        <div v-if="allRemark.length!==0">
          <div v-for="(item,index) in allRemark" :key="index" class="optionItem">
            <div class="itemTop">
              <div :class="['itemImg',item.option===2?'redImg':'']">
                <img :src="baseUrl+item.userImg" alt="" width="100%"
                     height="100%"
                >
              </div>
              <div class="itemText">
                <p>{{ item.userName }}</p>
                <el-tag :type="item.userExperType" size="mini">
                  Lv.{{ item.userexper }} {{ item.userExperDes }}
                </el-tag>
              </div>
            </div>
            <div :class="['itemContent',item.option===2?'redContent':'']">
              <div class="wordCon">
                {{ showEllipsis(item.rcontent,43) }}
              </div>
            </div>
            <p class="pDate">
              {{ transformTimestamp(item.rDate) }}
            </p>
          </div>
        </div>
        <div v-else class="emtype">
          暂无评论~
        </div>
      </div>
    </div>
    <div class="bulletBtn" @click="goWriteRemark">
      <span>杠!</span>
    </div>
  </div>
</template>
<script>
import eventBus from '@/api/eventBus';
import { showEllipsis, transformTimestamp } from '../utils/validate';
import { getRemarkByQid, getOptionsByQid } from '../api/subject';
export default {
  data() {
    return {
      subjectInfo: '',
      userExperType: 'info',
      userExperDes: '杠铃',
      allRemark: [],
      allOption: [],
      pageFlag: 0
    };
  },
  watch: {
    subjectInfo: {
      handler(newValue) {
        switch (newValue.userexper) {
        case 1:
          this.userExperType = 'info';
          this.userExperDes = '杠师';
          break;
        case 2:
          this.userExperType = 'success';
          this.userExperDes = '杠尊';
          break;
        case 3:
          this.userExperType = '';
          this.userExperDes = '杠王';
          break;
        case 4:
          this.userExperType = 'warning';
          this.userExperDes = '杠圣';
          break;
        case 5:
          this.userExperType = 'danger';
          this.userExperDes = '杠神';
          break;
        default:
          break;
        }
      },
      immediate: true
    }
  },
  created() {
    this.subjectInfo = !this.$route.params.subjectItem ? this.$store.getters.subjectInfo : this.$route.params.subjectItem;
    this.$store.dispatch('setSubjectInfo', this.subjectInfo);
    this.baseUrl = process.env.VUE_APP_DEV_TARGET;
    this.pageFlag = this.$route.params.flag ? this.$route.params.flag : 0;
  },
  mounted() {
    eventBus.$emit('changeTitle', '题目详情');
    this.getRemark();
    this.getOptions();
    this.btnFlag = true;
  },
  beforeDestroy() {
    if (this.pageFlag === 1) {
      eventBus.$emit('changeTitle', '杠题搜索');
    } else if (this.pageFlag === 4) {
      eventBus.$emit('changeTitle', '杠题广场');
    } else if (this.pageFlag === 41) {
      eventBus.$emit('changeTitle', '杠题列表');
    } else if (this.pageFlag === 5) {
      eventBus.$emit('changeTitle', '杠精成长记');
    } else {
      eventBus.$emit('changeTitle', '首页');
    }
  },
  methods: {
    showEllipsis,
    transformTimestamp,
    renderUserTag(obj) {
      obj.forEach(item => {
        switch (item.userexper) {
        case 1:
          this.$set(item, 'userExperType', 'info');
          this.$set(item, 'userExperDes', '杠师');
          break;
        case 2:
          this.$set(item, 'userExperType', 'success');
          this.$set(item, 'userExperDes', '杠尊');
          break;
        case 3:
          this.$set(item, 'userExperType', '');
          this.$set(item, 'userExperDes', '杠王');
          break;
        case 4:
          this.$set(item, 'userExperType', 'warning');
          this.$set(item, 'userExperDes', '杠圣');
          break;
        case 5:
          this.$set(item, 'userExperType', 'danger');
          this.$set(item, 'userExperDes', '杠神');
          break;
        default:
          break;
        }
      });
    },
    format() {
      return '';
    },
    getRemark() {
      const param = { qid: this.subjectInfo.qid };
      getRemarkByQid(param).then(res => {
        if (res.data.code === 200) {
          this.renderUserTag(res.data.data);
          this.allRemark = res.data.data;
        }
      });
    },
    getOptions() {
      getOptionsByQid().then(res => {
        if (res.data.code === 200) {
          this.allOption = res.data.data;
        }
      });
    },
    goWriteRemark() {
      let optionFlag = 0;
      this.allOption.forEach(item => {
        if (item.uid === this.$store.getters.userInfo.uid && item.qid === this.subjectInfo.qid) {
          optionFlag = item.useroption;
        }
      });
      this.$router.push({ name: 'writeRemarkHome', params: { questions: this.subjectInfo, optionFlag: optionFlag, flag: 1 } });
    }
  }
};
</script>
<style lang="scss" scoped>
.subjectInfo{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .officialTop{
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom right,#d81e06,#409EFF);
    display: flex;
    align-items: center;
    justify-content: center;
    .topBox{
      width: 90%;
      height: 70%;
      background: #ffff;
      border-radius: 10px;
      margin-top: -30px;
      box-shadow: 2px 2px 5px #5e5e5e;
      padding: 10px;
      .contentTop{
        width: 100%;
        height: 60px;
        p{
          font-size: 12px;
          color: #5e5e5e;
          margin-bottom: 10px;
        }
        .userInfo{
          display: flex;
          .userPicture{
            width: 36px;
            height: 36px;
            overflow: hidden;
            border-radius: 100%;
            margin-right: 10px;
          }
          p{
            font-size: 16px;
            color: #3d3d3d;
            font-weight: bold;
            .date{
              font-size:10px;
              font-weight:normal;
              color: #909399;
              display: inline-block;
              margin-left: 5px;
            }
            .el-tag{
              font-size: 10px  !important;
            }
          }
        }
      }
      .contentMiddle{
        width: 100%;
        height: 50%;
        margin-top: 15px;
        p{
          text-align: center;
          font-size: 16px;
          font-weight: bold;
          line-height: 32px;
          margin-bottom: 10px;
        }
        span{
          display: inline-block;
          padding: 0 15px;
          font-size: 14px;
          line-height: 24px;
          color: #5e5e5e;
        }
      }
      .contentBottom{
        width: 100%;
        padding: 0 15px;
        display: flex;
        align-items: center;
        .progress{
          width: 90%;
          margin-right: 10px;
          .progressText{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
          }
        }
      }
    }
  }
  .infoBottom{
    width: 100%;
    min-height: 300px;
    margin-top: -30px;
    border-radius: 10px 10px 0px 0px;
    background:#ffff;
    box-shadow: 2px 2px 5px #5e5e5e;
    .optionItem{
      margin: 0 auto;
      width: 90%;
      // height: 80px;
      padding: 10px 0;
      border-bottom: 1px solid gray;
      .itemTop{
        width: 100%;
        height: 36px;
        display: flex;
        .itemImg{
          width: 32px;
          height: 32px;
          border-radius: 100%;
          border: 2px solid #409EFF;
          overflow: hidden;
        }
        .redImg{
          border: 2px solid #F56C6C;
        }
        .itemText{
          margin-left: 10px;
          p{
            font-size: 14px;
            font-weight: bold;
          }
          .el-tag{
              font-size: 10px;
            }
        }
      }
      .itemContent{
        margin-top: 15px;
        box-shadow: 1px 2px 2px #409EFF;
        background: #a3d0fd;
        border-radius: 10px;
        width: calc(100% - 42px);
        margin-left: 42px;
        height: 60px;
        .wordCon{
          box-sizing: border-box;
          padding: 5px;
          width: 100%;
          height: 100%;
          font-size: 12px;
          line-height: 22px;
        }
      }
      .redContent{
        box-shadow: 1px 2px 2px #F56C6C;
        background: #f3a1a1;
      }
      .pDate{
        margin-top: 10px;
        font-size: 12px;
        color: #5e5e5e;
        text-align: right;
      }
    }
    .optionItem:last-child{
      border: none;
    }
    .emtype{
      text-align: center;
      font-size: 14px;
      color: #5e5e5e;
      line-height: 36px;
    }
  }
}
.bulletBtn{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%,0);
  background: linear-gradient(to top left,#d81e06,#409EFF);
  border-radius: 15px;
  color: #fff;
  display: flex;
  font-size: 16px;
  line-height: 32px;
  padding: 5px 18px;
  text-align: center;
  align-items: center;
  justify-content: center;
  // z-index: 999;
}
</style>
